<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    } 
    body{
       overflow-y: hidden; 
    }
    
    .left{
        min-width: 40px;
        width: 200px;
        background-color: #6296ea; 
        position: fixed;
        z-index: 1000;
        top:0px;
        left:0px;
        bottom:0px;
        display: flex;
    }
    .right{
        position: relative; 
        height: calc(100vh-0px);
        margin-left: 200px;

    }
    .right .search{
        width: 100%;
        height: 90px;
        background-color: #57cfe7;
        position: fixed;
        z-index: 1000;
        top:0px;
    }

    .right_content{
        top:90px;
        padding:10px; 
        /* overflow-y: scroll; */
        overflow: hidden;
        height: auto;
        position: relative;
    }
</style>

<script type="text/javascript">
		   
    function setIFrameHeight(){
           var iframeid=document.getElementById("contentFrame"); //iframe id
           if (document.getElementById){
             iframeid.height =document.documentElement.clientHeight-90;      		   	   
         }
    }

</script>   
<body>
    <main id="main">
          <div class="left">
            <ul>
                <li><a href="pages/demo01.html" target="contentFrame">demo01</a></li>
                <li><a href="pages/demo02.html" target="contentFrame">demo02</a></li>
                <li><a href="pages/demo03.html" target="contentFrame">demo03</a></li>
            </ul>
          </div>
          <div class="right">
            <div class="search"></div>            
              <iframe style="margin-top:90px;overflow: auto;padding:10px" id="contentFrame" name="contentFrame" src="pages/demo01.html" frameborder="0" width="100%" onload="setIFrameHeight()" ></iframe>  
          </div>
    </main>
</body>
</html>